<template>
  <div>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <!-- 结构优化计算工作流-->
      <el-tab-pane name="first">
        <span slot="label">
          <svg-icon
            icon-class="wf-optimize"
            class="tab-pane-label-class"
          ></svg-icon>
          结构优化计算工作流
        </span>
        <optimize-panel
          :stage-type="stageType"
          @magnify="magnify"
        ></optimize-panel>
      </el-tab-pane>
      <!-- 载荷计算工作流-->
      <el-tab-pane name="second">
        <span slot="label">
          <svg-icon
            icon-class="wf-load"
            class="tab-pane-label-class"
          ></svg-icon>
          载荷计算工作流
        </span>
        <load-panel :stage-type="stageType"></load-panel>
      </el-tab-pane>
    </el-tabs>
    <el-dialog
      title="流程图"
      :visible.sync="dialogVisible"
      fullscreen
      :before-close="handleClose"
    >
      <div id="diaRap"></div>
    </el-dialog>
  </div>
</template>

<script>
  import OptimizePanel from '../panel/OptimizePanel'
  import loadPanel from '../panel/LoadPanel'
  import { getAction } from '@/api/action'
  import { initRaphael } from '@/utils/PreWebRaphaelTools'

  const stageType = 1
  export default {
    name: 'SchemeDesign',
    components: {
      OptimizePanel,
      loadPanel,
    },
    data() {
      return {
        dialogVisible: false,
        activeName: 'first',
        stageType: stageType,
        url: {
          graph: '/presoftasim/wf/workflow/graphData',
        },
      }
    },
    computed: {},
    created() {},
    methods: {
      // tab页面切换事件
      handleClick(tab, event) {},
      handleClose(done) {
        this.dialogVisible = false
      },
      magnify(workFlowOid) {
        this.dialogVisible = true
        getAction(this.url.graph, { workFlowId: workFlowOid }).then((res) => {
          this.initFun([res.data])
        })
      },
      initFun(jsonDataArr) {
        initRaphael('diaRap', jsonDataArr)
      },
    },
  }
</script>
